/**
 * 分页的构造函数
 * @param {String|dom} elem 
 * @param {Object} options 
 */
function Page (elem, options,callback) {
  // 判断传进来的elem是dom对象还是string 对象直接使用，字符串的话获取当前dom对象
  this.elem = (Object.prototype.toString.call(elem) == '[object String]') ? document.querySelector(elem) : elem
  this.options = options;
  this.callback=callback;
  // 保存数字盒子对象
  this.listDom = null;
  // 设置默认的属性
  this.defaultAttribute = {
    // 控制分页上按钮显示的内容
    language: {
      first: '<<',
      prev: '<',
      // 盒子占位
      list: '',
      next: '>',
      last: '>>'
    },
    // 控制数据的
    data: {
      total: 210,//数据总条数
      pageSize: 10// 每一页显示多少条
    }
  }
  // 合并参数
  this.mergeConfig();
  // 总页数 包含最后不足一页的数据所以只能向上取整
  this.totalNum = Math.ceil(this.defaultAttribute.data.total / this.defaultAttribute.data.pageSize)
  // 当前页数
  this.currentPage = 1;

  // 开始方法的调用
  this.start();
  this.clickEvent()
}
// 开始方法
Page.prototype.start = function () {
  this.elem.innerHTML = '';
  // 创建外部盒子
  this.createOut();
  // 将数字区域的创建放到了外层盒子的函数中
  this.callback(this.currentPage)
  console.log(this.currentPage)
}
// 合并参数
Page.prototype.mergeConfig = function () {
  for (let key in this.defaultAttribute) {
    if (this.options[key] != undefined) {
      for (let k in this.defaultAttribute[key]) {
        if (this.options[key][k] != undefined) {
          this.defaultAttribute[key][k] = this.options[key][k]
        }
      }
    }
  }
  //console.log(this.defaultAttribute)
}
// 创建外层盒子
Page.prototype.createOut = function () {
  // console.log(divDom)
  //console.log(this.defaultAttribute)
  for (let key in this.defaultAttribute.language) {
    let divDom = document.createElement('div');
    divDom.className = key;
    divDom.innerHTML = this.defaultAttribute.language[key];
    (key == 'list') && (this.listDom = divDom)
    this.elem.appendChild(divDom)
  }

  // 创建数字区域
  this.numArea()
  // 创建跳转框
  this.changeBtn()
}
// 显示的数字与总页数以及当前所在的页码有关系
// 1、如果总页数小于等于5的显示1到总页数之间数字
// 2、如果总页数大于5
// 		  1、如果当前页 小于等于3 永远显示1-5直接的数字
//      2、如果当前页 大于等于 总页数-2 永远显示最后5个数字
// 	  	3、其他情况 显示 当前页-2 到当前页+2之间数字
// 创建数字标签
Page.prototype.createNum = function (strat, end) {
  for (let i = strat; i <= end; i++) {
    let p = document.createElement('p')
    p.innerHTML = i;
    (i == this.currentPage) && (p.className = 'active')
    this.listDom.appendChild(p)
  }
}
//创建数字区域
Page.prototype.numArea = function () {
  if (this.totalNum <= 5) {
    this.createNum(1, this.totalNum);
    return;
  } else {
    if (this.currentPage <= 3) {
      // 当前页小于等3 显示1-5之间的数字
      this.createNum(1, 5);
    } else if (this.currentPage >= this.totalNum - 2) {
      this.createNum(this.totalNum - 4, this.totalNum);
    } else {
      this.createNum(this.currentPage - 2, this.currentPage - 0 + 2);
    }
  }
}
// 创建跳转框和按钮
Page.prototype.changeBtn = function () {
  let ipt = document.createElement('input');
  ipt.style.width = '50px'
  ipt.type = 'text'
  this.elem.appendChild(ipt);
  let btn = document.createElement('button')
  btn.innerHTML = '跳转'
  this.elem.appendChild(btn)
}
//点击切换
Page.prototype.clickEvent = function () {
  this.elem.addEventListener('click', e => {
    // e.target 拿到的是事件源 事件委托中p是事件源
    console.log(e.target.nodeName)
    switch (e.target.className) {
      case 'first':
        this.currentPage = 1;
        this.start();
        break;
      case 'prev':
        if (this.currentPage > 1) {
          this.currentPage--;
          this.start();
        }
        break;
      case 'next':
        if (this.currentPage < this.totalNum) {
          this.currentPage += 1;
          this.start();
        }
        break;
      case 'last':
        this.currentPage = this.totalNum;
        //console.log('s')
        this.start();
        break;
      default:
        if (e.target.nodeName == 'P') {
          this.currentPage = e.target.innerHTML
          this.start();
        } else if (e.target.nodeName == 'BUTTON') {
          this.currentPage = this.elem.querySelector('input').value
          // console.log('p')
          this.start()
        }
        break;
    }
  })
}